<template>
  <div class=""
       style="display: flex;flex-direction: row;justify-content: center;height:100%;
       background: url('/bg3.jpg') center;background-repeat:no-repeat;">
    <div class="blur-box"
         style="margin-top: 80px;width:500px;padding:40px 30px 20px;border-radius: 10px;height:420px;">
      <div>
        <a-typography-title style="text-align: center;margin-bottom: 50px;margin-top:20px;">
          XX管理平台
        </a-typography-title>
        <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
          <a-form-item
              label="用户名"
              name="username"
              :rules="[{ required: true, message: '请输入你的用户名' }]"
          >
            <a-input v-model:value="formState.username"/>
          </a-form-item>

          <a-form-item
              label="密码"
              name="password"
              :rules="[{ required: true, message: '请输入你的密码' }]"
          >
            <a-input-password v-model:value="formState.password"/>
          </a-form-item>

<!--          <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 18 }">-->

<!--            <a-checkbox v-model:checked="formState.remember">保持登录</a-checkbox>-->
<!--          </a-form-item>-->
          <a-form-item :wrapper-col="{ offset: 2, span: 20 }" style="margin-top:70px;">
            <a-button style="width:100%;" type="primary" size="large" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>

</template>
<script setup>
import {reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import request from '@/util/request.js'
import {useStore} from 'vuex'
import {message} from "ant-design-vue";

const store = useStore();
const router = useRouter()
const route = useRoute()
const formState = reactive({
  username: 'admin',
  password: 'admin123',
  remember: true,
});

const onFinish = async values => {
  let data = values;
  data.password = data.password
  let res = await request({
    method: 'post',
    url: '/api/login',
    params: data,
    withNoToken:true,
  })
  //登录成功
  if (res.code === 200) {
    //保存token到localStorage中
    window.localStorage.setItem("admin_token", res.data)
    router.replace({
      path: '/index', replace: true,
    })
  } else {
    console.error("登录失败")
    message.error(res.errMsg);
    store.dispatch('user/logout')
  }
  store.commit('tab/removeAllTab')
};

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
</script>
<style scoped>
.blur-box {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0px 32px 0 rgba(0, 0, 0, 0.6);
}

.flow-bg {
  background-color: #fdb4ea;
  background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
  radial-gradient(closest-side, rgb(81, 243, 11), rgba(243, 11, 164, 0)),
  radial-gradient(closest-side, rgb(250, 231, 134), rgba(254, 234, 131, 0)),
  radial-gradient(closest-side, rgba(135, 91, 253, 1), rgba(170, 142, 245, 0)),
  radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));
  background-size: 130vmax 130vmax,
  80vmax 80vmax,
  90vmax 90vmax,
  110vmax 110vmax,
  90vmax 90vmax;
  background-position: -80vmax -80vmax,
  60vmax -30vmax,
  10vmax 10vmax,
  -30vmax -10vmax,
  50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 8s movement linear infinite;
}

@keyframes movement {
  0%, 100% {
    background-size: 130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
    background-position: -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  }
  25% {
    background-size: 100vmax 100vmax,
    100vmax 100vmax,
    110vmax 110vmax,
    90vmax 90vmax,
    60vmax 60vmax;
    background-position: -60vmax -90vmax,
    50vmax -40vmax,
    0vmax -20vmax,
    -40vmax -20vmax,
    40vmax 60vmax;
  }
  50% {
    background-size: 80vmax 80vmax,
    130vmax 130vmax,
    60vmax 60vmax,
    60vmax 60vmax,
    80vmax 80vmax;
    background-position: -50vmax -70vmax,
    40vmax -30vmax,
    10vmax 0vmax,
    20vmax 10vmax,
    30vmax 70vmax;
  }
  75% {
    background-size: 90vmax 90vmax,
    80vmax 80vmax,
    50vmax 50vmax,
    90vmax 90vmax,
    70vmax 70vmax;
    background-position: -50vmax -40vmax,
    50vmax -30vmax,
    20vmax 0vmax,
    -10vmax 10vmax,
    40vmax 60vmax;
  }
}
</style>
